<template>
	<view class="main" :style="{ '--color': vuex_config.themeColor1,'--price':vuex_config.price }">
		<sww-nav-bar :title="title"></sww-nav-bar>
		<sww-search :enable="false" check-nav @change="$onSearch" keyWord="prod"></sww-search>
		<!--    内容区-->
		<view class="cat-content u-border-top">
			<!--      左边一级分类-->
			<scroll-view scroll-y class="cat-left" scroll-with-animation :scroll-top="catLeft.scrollTop">
				<block v-for="(item, index) in catLeftList" :key="index">
					<view class="cat-left-item" :class="{ 'cat-left-act': catLeft.current === index }" @click="$switchCat(index)">
						<text>{{ item.name }}</text>
					</view>
				</block>
			</scroll-view>
			<!--      右边内容-->
			<view class="cat-right" v-if="catLeft.current > -1">
				<!-- 右边二级分类 -->
				<two-category :parentId="catLeftList[catLeft.current].pk_id" @changeTwoCategory="changeTwoCategory"></two-category>
				<!-- 右边产品列表 -->
				<scroll-view
					class="cat-right-prod"
					scroll-y
					refresher-enabled
					:refresher-threshold="90"
					:refresher-triggered="refresherTriggered"
					@scrolltolower="$loadMore"
					@refresherrefresh="$pullDown"
					:scroll-top="prodScrollTop"
				>
					<!-- <prod-list :dataList="dataList" :layout="2"></prod-list> -->
					<block v-for="(item, index) in dataList" :key="index">
						<view class="r-prod-item u-border-bottom" @click="goProdDetail(item)">
							<view class="r-prod-img">
								<view class="sww-rebate-wrap r-prod-rebate" v-if="$rebate(item.rebate)">
									<view class="sww-rebate">返 {{ $price(item.rebate) }}</view>
								</view>
								<u-lazy-load :image="item.logo || vuex_config.errImg" width="180" height="180" img-mode="aspectFill"></u-lazy-load>
							</view>
							<view class="r-prod-content">
								<view class="r-prod-title u-line-2">{{ item.name }}</view>
								<view class="subtitle u-line-1" v-if="vuex_config.subtitle == 1 && item.title">{{ item.title }}</view>
								<view class="r-prod-bottom">
									<view class="r-prod-price">
										<text class="u-font-26">￥</text>
										<text class="u-font-34">{{ $price(item.r_price === null? item.price : item.r_price) | priceFmt(false) }}</text>
										<text class="u-font-26">{{ $price(item.r_price === null? item.price : item.r_price) | priceFmt(true) }}</text>
										<text class="r-prod-market-price" v-if="item.market_price && item.market_price > 0">￥{{ $price(item.market_price) }}</text>
									</view>
									<view class="r-prod-cart" @click.stop="$showSpec(item)">
										<u-icon name="e73d" custom-prefix="iconfont" color="#ffffff" size="26" top="1"></u-icon>
									</view>
								</view>
							</view>
						</view>
					</block>
					<sww-load-more :params="dataListParams" @load="$loadMore"></sww-load-more>
				</scroll-view>
			</view>
		</view>
		<sww-goods-spec v-model="specVisible" type="2" :params="specParams"></sww-goods-spec>
		
		<sww-login></sww-login>
		<u-tabbar v-if="placeholder"></u-tabbar>
	</view>
</template>
<script>
import { pagingMixin } from '../../mixins/pagingMixin';
import { mapState } from 'vuex';
import { pageShare } from '../../mixins/pageShare';
// import prodList from '@/pagecomponents/prodList/index.vue';
import twoCategory from './twoCategory.vue';
export default {
	mixins: [pagingMixin, pageShare],
	props: {
		placeholder: {
			//是否开启tabbar底部占位
			type: Boolean,
			default: true
		},
		tabIndex:{
			type:Number,
			default:0
		}
	},
	components: {
		// 'prod-list': prodList
		'two-category': twoCategory
	},
	data() {
		return {
			catLeftList: [], //1级分类列表
			title:'',
			catLeft: {
				current: -1,
				height: 0,
				itemHeight: 0,
				scrollTop: 0
			},
			twoCategoryId: null, // 二级分类对应的id
			prodScrollTop: 0,
			refresherTriggered: false,
			searchKey: '',
			specVisible: false,
			specParams: {
				buyType: 'cart',
				prodId: ''
			},
			init:false
		};
	},
	computed: {
		...mapState(['vuex_tab_params','vuex_tab_bar']),
		prodParams() {
			if (this.catLeftList.length > 0) {
				if (this.twoCategoryId) {
					return {
						type: 1,
						two_type: this.twoCategoryId,
						name: this.searchKey
					};
				} else {
					return {
						type: 1,
						one_type: this.catLeftList[this.catLeft.current].pk_id,
						name: this.searchKey
					};
				}
			} else {
				return {
					type: 1
				};
			}
		}
	},
	methods: {
		$onLoad: function() {
			let obj = this.vuex_tab_bar.list[this.tabIndex]
			this.title = obj.query.title || obj.text
			this.initOnLoad()
		},
		$onShow() {
			this.shareOnshow()
			if(this.init){
				if(this.catLeftList.length > 0){
					if (this.vuex_tab_params && this.vuex_tab_params.id) {
						// 避免初始化也执行
						let index = this.catLeftList.findIndex(item => item.pk_id == this.vuex_tab_params.id);
						this.$switchCat(index > -1 ? index : 0);
						//参数使用后置空
						this.$u.vuex('vuex_tab_params', null);
					}
				}else{
					this.initOnLoad()
				}
			}else{
				this.init = true
			}
		},
		initOnLoad () {
			if (this.vuex_tab_params && this.vuex_tab_params.id) {
				this.$initPage(this.vuex_tab_params.id);
				//参数使用后置空
				this.$u.vuex('vuex_tab_params', null);
			} else {
				this.$initPage();
			}
		},
		// 页面下拉刷新
		$onPullDownRefresh () {
			this.catLeftList = []
			this.catLeft = {
				current: -1,
				height: 0,
				itemHeight: 0,
				scrollTop: 0
			}
			this.initOnLoad()
		},
		$pullDown() {
			if (this.refresherTriggered) return;
			this.refresherTriggered = true;
			this.$initProd();
		},
		// 点击左边的栏目切换
		async $switchCat(index) {
			if (index === this.catLeft.current) return;
			this.twoCategoryId = null;
			this.catLeft.current = index;
			this.$initProd();
			--this.prodScrollTop;
			// 如果为0，意味着尚未初始化
			if (this.catLeft.height === 0 || this.catLeft.itemHeight === 0) {
				let catInfo = await this.$getFields('.cat-left');
				let catItemInfo = await this.$getFields('.cat-left-item');
				this.catLeft = { ...this.catLeft, height: catInfo.height, itemHeight: catItemInfo.height };
			}
			// 将菜单菜单活动item垂直居中
			this.catLeft.scrollTop = index * this.catLeft.itemHeight + this.catLeft.itemHeight / 2 - this.catLeft.height / 2;
		},
		// 初始化页面数据
		$initPage(catId = '') {
			this.$resPost('GetProductClassify', { type: 1, parent_id: 0, page_size: 100 }).then(({ data }) => {
				// console.log('sd', data)
				this.catLeftList = [{ pk_id: '-1', name: '全部' }].concat(data);
				if (catId) {
					let index = this.catLeftList.findIndex(item => item.pk_id == catId);
					this.$switchCat(index > -1 ? index : 0);
				} else {
					this.catLeft.current = 0;
					this.$initProd();
				}
			}).catch(e=>{
				console.log('err', e)
			});
		},
		$initProd() {
			let params = {}
			if(this.vuex_user.level){
				params.gobal_buyer = this.vuex_user.level
			}
			this._init_data(
				'GetProductList',
				{ ...this.prodParams,...params },
				{
					lastCallBack: () => {
						if (this.refresherTriggered) {
							this.refresherTriggered = false;
							this.$toast('刷新成功');
						}
					}
				}
			);
		},
		$loadMore() {
			this._load_data();
		},
		//搜索
		$onSearch(searchKey) {
			this.searchKey = searchKey;
			this.twoCategoryId = null;
			this.catLeft.current = 0;
			this.$initProd();
		},
		//打开规格弹框
		$showSpec(item) {
			this.$login().then(() => {
				this.specParams.prodId = item.pk_id;
				this.specVisible = true;
			});
		},
		// 二级分类变化
		changeTwoCategory(pk_id) {
			this.twoCategoryId = pk_id;
			this.$initProd();
		},
		goProdDetail(item) {
			this.$toProd({ ...item, prodType: 1 });
		}
	},
	filters: {
		priceFmt(price, isPoint = false) {
			let [priceInt, pricePoint] = price.split('.');
			return isPoint ? (pricePoint ? '.' + pricePoint : '') : priceInt;
		}
	}
};
</script>
<style lang="scss" scoped>
.main {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	/* 内容区 */
	.cat-content {
		width: 100%;
		flex: 1;
		display: flex;
		height: 100%;
		overflow: hidden;
		/* 一级分类 */
		.cat-left {
			width: 162rpx;
			height: 100%;
			background-color: #f5f5f5;

			.cat-left-item {
				width: 100%;
				min-height: 90rpx;
				padding: 0 10rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				text {
					max-width: 100%;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}

			.cat-left-act {
				position: relative;
				background-color: #ffffff;
				color: var(--color);
				&::before {
					content: '';
					width: 4rpx;
					height: 50rpx;
					background-color: var(--color);
					position: absolute;
					top: 50%;
					left: 1rpx;
					transform: translate(0, -50%);
				}
			}
		}

		.cat-right {
			flex: 1;
			height: 100%;
			display: flex;
			flex-direction: column;
			overflow: hidden;

			/* 产品列表 */
			.cat-right-prod {
				flex: 1;
				width: 100%;
				height: 100%;
				overflow: hidden;
				padding: 0 20rpx;
				box-sizing: border-box;
				background: #fff;
				.r-prod-item {
					width: 100%;
					display: flex;
					padding: 30rpx 0;
					.r-prod-img {
						width: 180rpx;
						height: 180rpx;
						margin-right: 20rpx;
						border-radius: 12rpx;
						overflow: hidden;
						position: relative;
						.r-prod-rebate {
							position: absolute;
							top: 0;
							left: 0;
							z-index: 1;
							border-radius: 12rpx 0 12rpx 0;
						}
					}
					.r-prod-content {
						flex: 1;
						height: 180rpx;
						display: flex;
						flex-direction: column;
						overflow: hidden;
						.r-prod-title {
							width: 100%;
							font-size: 28rpx;
						}
						.subtitle {
							color: #999;
							font-size: 24rpx;
							margin-top: 6rpx;
							line-height: 32rpx;
						}
						.r-prod-desc {
							font-size: 24rpx;
							color: #999999;
							line-height: 60rpx;
						}
						.r-prod-bottom {
							margin-top: auto;
							width: 100%;
							display: flex;
							align-items: center;
							.r-prod-price{
								color: var(--price);
							}
							.r-prod-market-price {
								color: #999999;
								margin-left: 8rpx;
								text-decoration: line-through;
								font-size: 24rpx;
							}
							.r-prod-cart {
								width: 40rpx;
								height: 40rpx;
								background-color: var(--color);
								border-radius: 50%;
								display: flex;
								align-items: center;
								justify-content: center;
								margin-left: auto;
							}
						}
					}
				}
			}
		}
	}
}
</style>
